// DOM加载完成后执行初始化
document.addEventListener('DOMContentLoaded', function() {
    // 轮播图逻辑
    const slides = document.querySelectorAll('.slide');
    const dots = document.querySelectorAll('.dot');
    let currentSlide = 0;
    
    // 显示指定索引的幻灯片，并更新指示器状态
    function showSlide(n) {
        // 移除所有幻灯片和指示器的active类
        slides.forEach(slide => slide.classList.remove('active'));
        dots.forEach(dot => dot.classList.remove('active'));
        
        // 为当前幻灯片和对应指示器添加active类
        slides[n].classList.add('active');
        dots[n].classList.add('active');
    }
    
    // 切换到下一张幻灯片
    function nextSlide() {
        // 计算下一张幻灯片的索引，使用模运算确保循环播放
        currentSlide = (currentSlide + 1) % slides.length;
        showSlide(currentSlide);
    }
    
    // 为每个指示器添加点击事件，点击时切换到对应幻灯片
    dots.forEach((dot, index) => {
        dot.addEventListener('click', () => {
            currentSlide = index;
            showSlide(currentSlide);
        });
    });
    
    // 每5秒自动切换到下一张幻灯片
    setInterval(nextSlide, 5000);
    
    // 加载商品数据到页面
    loadProducts();
});

// 模拟商品数据（实际项目中通常从后端API获取）
const products = [
    {
        id: 1,
        name: '华为P60 Pro',
        price: 6988,
        image: 'all-pura80-ultra.png',
        description: '超聚光XMAGE影像'
    },
    {
        id: 2,
        name: 'MateBook X Pro',
        price: 9999,
        image: 'matebook-fold-ultimate-design.jpg',
        description: '13代酷睿处理器'
    },
    {
        id: 3,
        name: 'Watch GT 3 Pro',
        price: 2488,
        image: 'watch-5-pc.jpg',
        description: '高端智能手表'
    },
    {
        id: 4,
        name: 'FreeBuds Pro 2',
        price: 1299,
        image: 'shelf-huawei-freebuds-pro-4.png',
        description: '旗舰降噪耳机'
    }
];

// 加载商品数据到页面的网格布局中
function loadProducts() {
    const productGrid = document.querySelector('.product-grid');
    
    // 遍历商品数据，为每个商品创建卡片元素
    products.forEach(product => {
        const productCard = document.createElement('div');
        productCard.className = 'product-card';
        productCard.innerHTML = `
            <div class="product-image">
                <img src="${product.image}" alt="${product.name}">
            </div>
            <div class="product-info">
                <h3 class="product-title">${product.name}</h3>
                <p class="product-description">${product.description}</p>
                <p class="product-price">¥${product.price.toFixed(2)}</p>
                <button class="add-to-cart" data-id="${product.id}">加入购物车</button>
            </div>
        `;
        productGrid.appendChild(productCard);
    });
    
    // 为所有"加入购物车"按钮添加点击事件
    document.querySelectorAll('.add-to-cart').forEach(button => {
        button.addEventListener('click', function() {
            // 获取商品ID，查找对应的商品信息
            const productId = parseInt(this.getAttribute('data-id'));
            const product = products.find(p => p.id === productId);
            // 将商品添加到购物车
            addToCart(product);
        });
    });
}

// 将商品添加到购物车
function addToCart(product) {
    // 从localStorage获取购物车数据，若无则初始化为空数组
    let cart = JSON.parse(localStorage.getItem('cart')) || [];
    
    // 检查商品是否已在购物车中
    const existingItem = cart.find(item => item.id === product.id);
    
    if (existingItem) {
        // 已存在则增加数量
        existingItem.quantity += 1;
    } else {
        // 不存在则添加新商品
        cart.push({
            id: product.id,
            name: product.name,
            price: product.price,
            image: product.image,
            quantity: 1
        });
    }
    
    // 将更新后的购物车数据保存到localStorage
    localStorage.setItem('cart', JSON.stringify(cart));
    // 更新购物车图标上的数量显示
    updateCartCount();
    // 显示添加成功的提示
    alert(`${product.name} 已添加到购物车`);
}

// 更新购物车图标上的数量显示
function updateCartCount() {
    // 从localStorage获取购物车数据
    const cart = JSON.parse(localStorage.getItem('cart')) || [];
    // 计算所有商品的总数量
    const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
    
    // 更新页面上所有购物车图标的数量显示
    document.querySelectorAll('.cart-count').forEach(element => {
        element.textContent = totalItems;
    });
}

// 初始化页面时更新购物车数量显示
updateCartCount();